﻿@{
    ViewBag.Title = "广告管理";
}
@section headerSection{
    <link href="~/Resources/mainFrame/css/plugins/bootstrap-fileinput/fileinput.min.css" rel="stylesheet" />
    <link href="~/Resources/mainFrame/css/plugins/summernote/summernote.css" rel="stylesheet" />
    <link href="~/Resources/mainFrame/css/plugins/summernote/summernote-bs3.css" rel="stylesheet" />
    <style>
        #exampleToolbar > .form-group {
            float: left;
            margin: 0;
            margin-left: 5px;
        }
        #boardLeft{height:380px;float:left;}
        #boardRight{height:340px;float:right;}
        .input-sm{height:34px;}
        .control-label{width:132px;}
        .laydate-icon{margin:0;padding:0;padding-left:5px;}
        .file-preview-image{height:100px !important;}
    </style>
}
<div class="animated fadeInRight">
    <!-- Panel Other -->
    <div class="ibox float-e-margins" style="margin-bottom: 0px;">
        <div class="ibox-content" style="padding: 0 5px">
            <div class="row row-lg">
                <div class="col-sm-12 col-sm-leftRight">
                    <!-- Example Toolbar -->
                    <div class="example">
                        <div class="btn-group hidden-xs" id="exampleToolbar" role="group">
                            @{
                                List<string> folderList = (List<string>)ViewBag.elementList;
                                if (folderList.Contains("boardAdd"))
                                {
                                    <button id="boardAdd" type="button" class="btn btn-outline btn-primary">
                                        <i class="glyphicon glyphicon-plus" aria-hidden="true">新增</i>
                                    </button>
                                }
                                if (folderList.Contains("boardEdit"))
                                {
                                    <button id="boardEdit" type="button" class="btn btn-outline btn-primary">
                                        <i class="glyphicon glyphicon-pencil" aria-hidden="true">编辑</i>
                                    </button>
                                }
                                if (folderList.Contains("boardDel"))
                                {
                                    <button id="boardDel" type="button" class="btn btn-outline btn-danger">
                                        <i class="glyphicon glyphicon-trash" aria-hidden="true">删除</i>
                                    </button>
                                }
                                if (folderList.Contains("btnSearch"))
                                {
                                    <div class="form-group" style="margin-top:-2px;width:150px;">
                                        <select id="proType" name="proType" title="请选择产品类别" class="form-control show-tick selectpicker" placeholder="请选择产品类别">
                                            <option value="0" selected>全部</option>
                                            @*<option value="1">VRPPT</option>
                                            <option value="2">创客</option>
                                            <option value="3">头记</option>
                                            <option value="4">校史馆</option>*@
                                        </select>
                                    </div>
                                    <div class="form-group" style="margin-top:-2px;width:150px;">
                                        <select id="adType" name="adType" title="请选择广告类别" class="form-control show-tick selectpicker" placeholder="请选择广告类别">
                                            <option value="" selected>全部</option>
                                        </select>
                                    </div>
                                    <div class="form-group" style="margin-top:-2px;width:150px;">
                                        <select id="plat_type" name="plat_type" title="请选择平台类别" class="form-control show-tick selectpicker" placeholder="请选择平台类别">
                                            <option value="0" selected>全部</option>
                                        </select>
                                    </div>
                                    <div class="form-group" style="margin-top:-2px;width:130px;">
                                        <select id="adStatus" name="adStatus" title="请选择状态" class="form-control show-tick selectpicker" placeholder="请选择状态">
                                            <option value="0" selected>全部</option>
                                            <option value="1">待发布</option>
                                            <option value="2">已发布</option>
                                            <option value="3">已删除</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <input id="boardName" name="boardName" type="text" class="form-control" placeholder="标题/分组名/备注">
                                    </div>
                                    <div class="form-group" style="width:130px;">
                                        <input id="inDate" name="inDate" type="text" class="laydate-icon form-control input-sm" placeholder="开始时间" title="开始时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" />
                                    </div>
                                    <div class="form-group" style="width:130px;">
                                        <input id="outDate" name="outDate" type="text" class="laydate-icon form-control input-sm" placeholder="截止时间" title="截止时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" />
                                    </div>
                                    <div class="form-group">
                                        <button id="btnSearch" class="btn btn-primary" type="button"><i class="fa fa-search"></i>&nbsp;查询</button>
                                    </div>
                                }
                            }
                        </div>
                        <table id="exampleTableToolbar" data-mobile-responsive="true" data-radio="true"></table>
                    </div>
                    <!-- End Example Toolbar -->
                </div>
            </div>
        </div>
    </div>
    <!-- End Panel Other -->
</div>
<!-- 添加/编辑 -->
<div id="boardForm" style="overflow-x:hidden;overflow-y: auto; display: none;">
    <form class="form-horizontal m-t" id="boardFormTable" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <div id="boardLeft" class="col-sm-6" style="padding-right:0;">
                <div class="form-group">
                    <label class="col-sm-3 control-label">标题<span class="glyphicon glyphicon-asterisk requiredtitle"></span>：</label>
                    <div class="col-sm-8">
                        <input id="ad_title" name="ad_title" type="text" class="form-control input-sm" placeholder="请输入标题" title="请输入标题" required="" aria-required="true" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">产品类别<span class="glyphicon glyphicon-asterisk requiredtitle"></span>：</label>
                    <div class="col-sm-8">
                        <select id="pro_type" name="pro_type" title="请选择产品类别" data-live-search="true" class="form-control input-sm selectpicker" placeholder="请选择产品类别">
                            @*<option value="1" selected>VRPPT</option>
                    <option value="2">创客</option>
                    <option value="3">头记</option>
                    <option value="4">校史馆</option>*@
                        </select>
                        <input type="hidden" id="ad_id" name="ad_id" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">广告类别<span class="glyphicon glyphicon-asterisk requiredtitle"></span>：</label>
                    <div class="col-sm-8">
                        <select id="ad_type" name="ad_type" title="请选择广告类别" data-live-search="true" class="form-control input-sm selectpicker" placeholder="请选择广告类别"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">有效时间<span class="glyphicon glyphicon-asterisk requiredtitle"></span>：</label>
                    <div class="col-sm-8">
                        <input id="start_time" name="start_time" type="text" class="laydate-icon form-control input-sm" placeholder="开始时间" title="开始时间" autocomplete="off" onclick="laydate({ istime: true, format: 'YYYY-MM-DD hh:mm' })" required="" aria-required="true" style="float:left;width:48%;" />
                        <span style="float:left;">~</span>
                        <input id="end_time" name="end_time" type="text" class="laydate-icon form-control input-sm" placeholder="截止时间" title="截止时间" autocomplete="off" onclick="laydate({ istime: true, format: 'YYYY-MM-DD hh:mm' })" required="" aria-required="true" style="width:48%;" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">发布状态<span class="glyphicon glyphicon-asterisk requiredtitle"></span>：</label>
                    <div class="col-sm-8">
                        <select id="ad_status" name="ad_status" title="请选择发布状态" data-live-search="true" class="form-control input-sm selectpicker" placeholder="请选择发布状态">
                            <option value="1">待发布</option>
                            <option value="2" selected>已发布</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">序号<span class="glyphicon glyphicon-asterisk requiredtitle"></span>：</label>
                    <div class="col-sm-8">
                        <input id="ad_order" name="ad_order" type="text" class="form-control input-sm" value="0" placeholder="请输入序号：整数类型" title="请输入序号：整数类型" required="" aria-required="true" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">分组名：</label>
                    <div class="col-sm-8">
                        <input id="group_name" name="group_name" type="text" class="form-control input-sm" placeholder="请输入分组名" title="请输入分组名" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">店铺id：</label>
                    <div class="col-sm-8">
                        <input id="storeId" name="storeId" type="text" class="form-control input-sm" placeholder="请输入店铺id" title="请输入店铺" />
                        <input id="store_id" name="store_id" type="hidden" value="0" />
                    </div>
                </div>
            </div>
            <div id="boardRight" class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label" style="width:70px;padding:0;">图片：</label>
                    <div class="col-sm-10" style="height:250px;">
                        <input id="fileUpload" type="file" multiple class="file" style="height:250px;"/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">平台类别<span class="glyphicon glyphicon-asterisk requiredtitle"></span>：</label>
                    <div class="col-sm-8">
                        <select id="platType" name="platType" title="请选择平台类别" data-live-search="true" class="form-control input-sm selectpicker" placeholder="请选择平台类别"></select>
                    </div>
                </div>
               
                <div class="form-group">
                    <label class="col-sm-3 control-label">视频地址：</label>
                    <div class="col-sm-8">
                        <input id="video_url" name="video_url" type="text" class="form-control input-sm" placeholder="请输入视频地址" title="请输入视频地址" />
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">备注：</label>
            <div class="col-sm-10">
                <textarea class="form-control" id="ad_note" name="ad_note" rows="6" placeholder="请输入备注信息" title="请输入备注信息"></textarea>
            </div>            
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">内容：</label>
            <div class="col-sm-10">
                <input type="hidden" id="ad_content" name="ad_content" />
                <div class="summernote">
                </div>
            </div>
        </div>
    </form>
</div>
@section footSection{
    <script src="~/Resources/mainFrame/js/plugins/bootstrap-fileinput/fileinput.js"></script>
    <script src="~/Resources/mainFrame/js/plugins/bootstrap-fileinput/fileinput_locale_zh.js"></script>
    <script src="~/Resources/mainFrame/js/plugins/summernote/summernote.min.js"></script>
    <script src="~/Resources/mainFrame/js/plugins/summernote/summernote-zh-CN.js"></script>
    <script src="~/Resources/tools/summernoteHelper.js"></script>
    <script src="~/Resources/mainFrame/js/demo/form-validate-demo.min.js"></script>
    <script>
        var $table, options, addOrEditUrl, indexForm, isUpload = 0;
        var boardManager = {
            //1.0 初始化页面
            initPage: function () {
                parent.showLoadBoxs();
                boardManager.initTable();
                boardManager.bindEvent();
                boardManager.initSelect();
                boardManager.initNote();
                parent.delLoadBoxs();
            },
            //1.1 初始化富文本
            initNote:function(){
                //获取summernote样式，获取initData富文本
                $('.summernote').initSummernote({
                    height: 550
                });
                //拖拽隐藏
                $('.note-statusbar').hide();
            },
            //1.2 初始化Table
            initTable: function () {
                options = {
                    url: ctx + "/SysBoard/InitTable",
                    cutHeight: 5,
                    showRefresh: false,
                    showToggle: false,
                    showColumns: false,
                    singleSelect: false,//多选
                    toolbar: "#exampleToolbar",
                    queryParams: function (params) {
                        params = {
                            rows: params.limit,
                            //页面大小  
                            page: params.offset / params.limit + 1,
                            boardName: $('#boardName').val() ? encodeURI($('#boardName').val()) : "",//关键字
                            proType: $('#proType').val() ? encodeURI($('#proType').val()) : 0,//产品类别
                            adType: $('#adType').val() ? encodeURI($('#adType').val()) : "",//广告类别
                            platType:$('#plat_type').val(),
                            adStatus:$('#adStatus').val(),//状态
                            inDate: $('#inDate').val(),//开始起始
                            outDate: $('#outDate').val()//开始截止
                        }
                        return params;
                    },
                    columns: [
                    {
                        checkbox: true
                    }, {
                        field: 'ad_id',
                        title: '操作',
                        align: 'center',
                        formatter: function (value, row, index) {
                            return "<a hred='#' onclick=boardManager.boardDetial(" + value + ")>详情</a>";
                        }
                    }, {
                        field: 'ad_status',
                        title: '状态',
                        align: 'center',
                        formatter: function (value, row, index) {
                            switch (value) {
                                case 1: return "<span class='label label-warning'>待发布</span>"; break;
                                case 2: return "<span class='label label-success'>已发布</span>"; break;
                                case 3: return "<span class='label label-danger'>已删除</span>"; break;
                                default: return ""; break;
                            }
                        }
                    }, {
                        field: 'pro_type',
                        title: '产品类别',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var $text = "";
                            $.each($('#pro_type option'), function (index,item) {
                                if ($(item).val() === value.toString()) {
                                    $text = $(item).text();
                                    return false;
                                }   
                            });
                            return $text;
                        }
                    }, {
                        field: 'ad_type',
                        title: '类别',
                        align: 'center'
                    }, {
                        field: 'platType',
                        title: '平台类别',
                        align: 'center',
                        formatter: function (value, row, index) {
                            switch (value) {
                                case 1: return "小程序"; break;
                                case 2: return "网站"; break;
                                case 3: return "客户端"; break;
                            }
                        }
                    }, {
                        field: 'ad_url',
                        title: '图片',
                        align: 'center',
                        formatter: function (value, row, index) {
                            if (value)
                                return "<img src='" + value.toString().replace("~", window.location.origin + ctx) + "' style='width:150px;height:120px;' />";
                            return ""; 
                        }
                    }, {
                        field: 'ad_title',
                        title: '标题',
                        align: 'left',
                        formatter: function (value, row, index) {
                            var back;
                            if (value && value.toString().length > 10)
                                back = "<span title='" + value + "'>" + value.toString().substring(0, 18) + "...</span>";
                            else
                                back = value;
                            return back;
                        }
                    }, {
                        field: 'start_time',
                        title: '有效开始时间',
                        align: 'center'
                    }, {
                        field: 'end_time',
                        title: '有效结束时间',
                        align: 'center'
                    },{
                        field: 'group_name',
                        title: '分组名称',
                        align: 'center'
                    }, {
                        field: 'video_url',
                        title: '视频地址',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var back;
                            if (value && value.toString().length > 20)
                                back = "<span title='" + value + "'>" + value.toString().substring(0, 20) + "...</span>";
                            else
                                back = value;
                            return back;
                        }
                    }, {
                        field: 'ad_order',
                        title: '序号',
                        align: 'center'
                    }, {
                        field: 'ad_note',
                        title: '备注',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var back;
                            if (value && value.toString().length > 20)
                                back = "<span title='" + value + "'>" + value.toString().substring(0, 20) + "...</span>";
                            else
                                back = value;
                            return back;
                        }
                    }, {
                        field: 'update_time',
                        title: '最后修改时间',
                        align: 'center'
                    }, {
                        field: 'update_name',
                        title: '最后修改人',
                        align: 'center'
                    }, {
                        field: 'create_time',
                        title: '创建时间',
                        align: 'center'
                    }, {
                        field: 'create_name',
                        title: '创建人',
                        align: 'center'
                    }]
                }
                $table = tableHelper.initTable("exampleTableToolbar", options);
            },
            //1.3 绑定事件
            bindEvent: function () {
                $('#storeId').on('blur', function () {
                    help.int('storeId');
                }).on('keyup', function () { help.int('storeId'); });
                //查询
                $('#btnSearch').on('click', function () {
                    $table.bootstrapTable('refresh', options);
                });
                //新增
                $('#boardAdd').on('click', function () {
                    $('#ad_id').val('');
                    $('.summernote').setSummernote('');
                    boardManager.editForm();
                });
                //编辑
                $('#boardEdit').on('click', function () {
                    var row = boardManager.selections();
                    if (!row)
                        return false;
                    boardManager.editForm(row);
                });
                //删除
                $('#boardDel').on('click', function () {
                    var row = boardManager.selections(true);
                    if (!row)
                        return false;
                    layer.confirm('您确定要删除选中广告？', {
                        btn: ['确定', '取消'] //按钮
                    }, function () {
                        var index = layer.msg("删除中...", { icon: 6, time: 6000 });
                        var adID = new Array();
                        $.each(row, function (index, item) {
                            adID.push(item.ad_id);
                        });
                        $.ajax({
                            type: 'post',
                            url: ctx + '/SysBoard/DelBoardById',
                            dataType: 'json',
                            data: { adID: adID.join(',') },
                            async: false,
                            success: function (data) {
                                if (index)
                                    layer.close(index);
                                if (data.Statu === 0) {
                                    layer.msg("删除成功...");
                                    $table.bootstrapTable('refresh', options);
                                }
                                else
                                    layer.alert(data.Msg, { icon: 5 });
                            }
                        });
                    }, function () { });
                });
            },
            //1.4 获取选中
            selections: function (isAll) {
                var row = $table.bootstrapTable('getSelections');
                if (!row || row.length === 0) {
                    layer.msg("数据为空或未选中记录行~", { icon: 5 });
                    return false;
                }
                if (isAll)
                    return row;
                if (row.length > 1) {
                    layer.msg("当前操作不支持多选，请选择一行再操作！", { icon: 5 });
                    return false;
                }
                return row[0];
            },
            //1.5 添加编辑
            editForm: function (row) {
                //重置界面
                var $title = "添加广告";
                if (!row)
                    addOrEditUrl = ctx + "/SysBoard/AddBoard";//新增
                else {
                    addOrEditUrl = ctx + "/SysBoard/EditBoard";//编辑
                    $title = "编辑广告";
                }
                //清空表单
                $('#boardFormTable').resetHideValidForm();
                //打开编辑
                indexForm = layer.open({
                    title: [$title, 'font-size:18px;'],
                    type: 1,
                    content: $('#boardForm'),
                    scroll: true,//是否显示滚动条、默认不显示
                    btn: ['确定', '取消'],
                    area: ['1200px', '95%'],
                    success: function (li, o) {
                        if (row != null) {
                            $('#boardFormTable')[0].reset();//重置表单
                            $('#boardFormTable').LoadForm(row);//表单填充数据
                            //if (row.store_id)
                            $('#storeId').val(row.store_id);
                            if (row.ad_content)
                                $('.summernote').setSummernote(row.ad_content);
                            else
                                $('.summernote').setSummernote('');
                        }else
                            $('.summernote').setSummernote('');
                    },
                    yes: function (li, o) {
                        var content = $('.summernote').getSummernote();
                        if (content)
                            $('#ad_content').val(content.trim());
                        else
                            $('#ad_content').val('');
                        if ($('#boardFormTable').valid() && isUpload > 0)
                            $("#fileUpload").fileinput("upload");//上传
                        else {
                            var store_id = $('#storeId').val();
                            if (store_id)
                                $('#store_id').val(store_id);
                            else
                                $('#store_id').val('0');
                            var dataJson = {}, obj = $('#boardFormTable').serializeArray();
                            $.each(obj, function (i, v) {
                                dataJson[v.name] = v.value;
                            });
                            dataJson["isUpload"] = isUpload;
                            $.ajax({
                                type: 'post',
                                url: addOrEditUrl,
                                dataType: 'json',
                                data: dataJson,
                                async: false,
                                success: function (data) {
                                    if (data.Statu === 0) {
                                        layer.msg(data.Msg, { icon: 6 });
                                        if (indexForm)
                                            layer.close(indexForm);
                                        $table.bootstrapTable('refresh', options);
                                    }
                                    else
                                        layer.msg(data.Msg, { icon: 5 });
                                }
                            });
                        }
                    },
                    cancel: function (li, o) {

                    }
                });
            },
            //1.6 初始化下拉
            initSelect: function () {
                //产品类别
                $('#proType').initSelectcontrol("vrProType", true);
                $('#pro_type').initSelectcontrol("vrProType");
                $('#ad_type').initSelectpicker("VRBoardType");
                $('#adType').initSelectpicker("VRBoardType", null, true);
                $('#platType').initSelectpicker("boardPlatType");
                $('#plat_type').initSelectpicker("boardPlatType", null, true);
            },
            //1.7 上传完成后的执行事件
            uploadFinish: function (result) {
                if (result.response.Statu === 0) {
                    if (indexForm)
                        layer.close(indexForm);
                    $table.bootstrapTable('refresh', options);
                } else
                    layer.alert(result.response.Msg, { icon: 5 });
            },
            //1.8 详细
            boardDetial: function (id) {
                $.ajax({
                    type: 'post',
                    url: ctx + '/SysBoard/GetBoardById/' + id,
                    dataType: 'json',
                    async: false,
                    success: function (data) {
                        if (data.Statu === 0) {
                            var row = data.Data;
                            layer.open({
                                title: ['广告详情', 'font-size:18px;'],
                                type: 1,
                                content: $('#boardForm'),
                                scroll: true,//是否显示滚动条、默认不显示
                                btn: ['确定'],
                                area: ['1000px', '95%'],
                                success: function (li, o) {
                                    if (row != null) {
                                        $('#boardFormTable')[0].reset();//重置表单
                                        $('#boardFormTable').LoadForm(row);//表单填充数据
                                        if (row.ad_content)
                                            $('.summernote').setSummernote(row.ad_content);
                                        else
                                            $('.summernote').setSummernote('');
                                    }
                                },
                                yes: function (li, o) {
                                    layer.closeAll();
                                },
                                cancel: function (li, o) {
                                    layer.closeAll();
                                }
                            });
                        }
                        else
                            layer.alert(data.Msg, { icon: 5 });
                    }
                });
            }
        }
        function initUploadFile() {
            isUpload = 0;
            $("#fileUpload").fileinput({
                language:'zh',//设置语言
                uploadUrl: ctx + "/SysBoard/AddBoard", //上传的地址
                allowedFileExtensions: ['jpg', 'png', 'bmp', 'jpeg', 'gif'],//允许上传格式
                overwriteInitial: false,
                showUpload: false,//是否显示上传按钮
                maxFileSize: 0,//20M以内
                maxFileCount: 1,
                minFileCount: 0,
                maxImageWidth:320,//图片最大宽度
                maxImageHeight:100,//图片最大高度
                uploadExtraData: function () {
                    var dataJson = {}, obj = $('#boardFormTable').serializeArray();
                    $.each(obj, function (i, v) {
                        dataJson[v.name] = v.value;
                    });
                    dataJson["isUpload"] = isUpload;
                    return dataJson;
                },
                slugCallback: function (filename) {
                    return filename.replace('(', '_').replace(']', '_');
                }
            }).on('fileuploaded', function (event, data, previewId, index) {
                //异步上传成功结果处理
                boardManager.uploadFinish(data);
            }).on('filebatchuploadsuccess', function (event, data, previewId, index) {
                //同步上传成功结果处理
                boardManager.uploadFinish(data);
            }).on('filebatchselected', function (event, files) {
                //选中文件后
                isUpload = 1;
            });
        }
        initUploadFile();
        $(function () {
            boardManager.initPage();
        });
    </script>
}